import React, { useState, useEffect } from 'react';
import { Button, Form, Input, Radio, Checkbox } from '@nutui/nutui-react-taro';
import './index.less';
import Taro from '@tarojs/taro';
import AuthUtil from '../../utils/api/auth';
import { initiateWeChatPay } from './wechatPay';

function VehicleVerification() {
  const [form] = Form.useForm();
  const [agreedToPrivacy, setAgreedToPrivacy] = useState(1); // 跟踪是否同意隐私协议
  const instance = Taro.getCurrentInstance();
  const { type }: any = instance?.router.params;
  const [role, setRole] = useState(type || 'person'); // 默认角色为个人

  const handleRoleChange = (value) => {
    setRole(value);
    form.setFieldsValue({ name: '' }); // 清空姓名或公司名称输入
  };

  useEffect(() => {
    setRole(type);
  }, [type]);

  const handleAgreedToPrivacyChange = (e) => {
    // setAgreedToPrivacy(e.target.value === 'true');
  };

  const validatePhoneNumber = (phoneNumber) => {
    const regex = /^1[3-9]\d{9}$/;
    return regex.test(phoneNumber);
  };

  const handleSubmit = async (values) => {
    if (!values.name || !values.phone) {
      Taro.showToast({
        title: '请填写所有必填项',
        icon: 'none'
      });
      return;
    }
    if (!validatePhoneNumber(values.phone)) {
      Taro.showToast({
        title: '手机号格式不正确，请重新输入',
        icon: 'none'
      });
      return;
    }
    if (!agreedToPrivacy) {
      Taro.showToast({
        title: '请同意隐私协议',
        icon: 'none'
      });
      return;
    }

    const userInfo = Taro.getStorageSync('userInfo');
    const payOrderInfo = {
      openid: userInfo.openid,
      totalFee: 1,
      description: '车辆认证费用',
    };

    const isPay = await initiateWeChatPay(payOrderInfo);

    if (!isPay) {
      Taro.showToast({
        title: '支付失败，请检查网络',
        icon: 'none'
      });
      return;
    }

    const param = {
      realName: values.name,
      phoneNumber: values.phone,
      sellerType: role,
      payStatus: true,
      orderStatus: 1,  //未提交状态
    };
    const { data } = await AuthUtil.submitForm({ ...param });

    if (data) {
      const formData = {
        role: role,
        name: values.name,
        id: data.id,
        payStatus: true,
      };

      Taro.navigateTo({
        url: `/pages/carInfo/index?type=${role}&formData=${JSON.stringify(formData)}`
      });
      Taro.showToast({
        title: '创建订单成功',
        icon: 'none'
      });
    } else {
      Taro.showToast({
        title: '创建订单失败，请检查网络',
        icon: 'none'
      });
    }
  };

  return (
    <Form
      form={form}
      labelPosition="right"
      footer={
        <>
          <div>
       
            <div className="verification-instructions">
              <div className="instruction-item">
                本系统仅支持持有居民身份证或港澳台居民居住证的个人车主、公司受托人进行在线身份认证。如您仅持有护照、港澳通行证、台胞证等其它身份证件，请另行咨询市场开票工作人员。
              </div>
              <div className="instruction-item">
                试运行期间人脸核验服务费0元/次，请下单支付后提交各项资料，完成核验操作。如您下单后24小时内未提交人脸核验视频，系统将自动关闭订单，已支付费用原路退回。
              </div>
              <div className="instruction-item">
                本服务为非强制性项目，个人车主或公司受托人亦可持本人有效证件直接前往服务点现场完成身份认证。
              </div>
              <div className="instruction-item pay_aggrement">
                如果您在支付过程中不小心退出页面，请在‘我的’页面的订单记录中提交相关资料
              </div>

            </div>
            <Button
              nativeType="submit"
              style={{ background: '#009cff' }}
              block
              type="primary"
              disabled={!agreedToPrivacy}
            >
              同意并继续
            </Button>
          </div>
        </>
      }
      onFinish={handleSubmit}
    >
      <Form.Item
        name="role"
      >
        <div className='select_role'>
          <Radio.Group direction="horizontal" value={role} onChange={handleRoleChange}>
            <Radio shape="button" value="person">个人</Radio>
            <Radio shape="button" value="company">公司</Radio>
          </Radio.Group>
        </div>
      </Form.Item>
      {role === 'person' && (
        <Form.Item
          name="name"
          required
          label="车主姓名"
          rules={[{ required: true, message: '请输入车主姓名或公司名称' }]}
        >
          <Input placeholder="请输入车主姓名" />
        </Form.Item>
      )}
      {role === 'company' && (
        <Form.Item
          name="name"
          required
          label="公司名称"
          rules={[{ required: true, message: '请输入车主姓名或公司名称' }]}
        >
          <Input placeholder="请输入公司名称" />
        </Form.Item>
      )}
      <Form.Item
        name="phone"
        required
        label="联系电话"
        rules={[{ required: true, message: '请输入联系电话' }]}
      >
        <Input type="number" placeholder="请输入联系电话" maxLength={11} />
      </Form.Item>
    </Form>
  );
}

export default VehicleVerification;